<template>
	<div>
		<div class="contact-info">
      <div class="option">
        <i class="el-icon-arrow-up"></i>
        <div class="text">Meknes morocco</div>
      </div>

      <div class="option">
        <i class="fas fa-envelope"></i>
        <div class="text">Example@domain.com</div>
      </div>

      <div class="option">
        <i class="fas fa-mobile-alt"></i>
        <div class="text">+20210219268</div>
      </div>

    </div>
	</div>
</template>

<script>
export default {
	name: 'FrontendVue2NewNav',

	data() {
		return {
			
		};
	},

	mounted() {
		
	},

	methods: {
		
	},
};
</script>

<style lang="less" scoped>
body{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
  background: #333;
}

.contact-info{
  position: fixed;
  top: 40%;
  z-index: 99999;
  left: 0;
}

.option{
  cursor: pointer;
  position: relative;
}

.option i{
  display: block;
  width: 60px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  background: #f1f1f1;
  color: #b9b9b9;
  font-size: 20px;
  transition: 0.6s;
}

.option:hover i{
  color: #3498db;
}

.text{
  position: absolute;
  height: 60px;
  width: 200px;
  background: #1b1b1b;
  top: 0;
  z-index: -1;
  left: -140px;
  color: #fff;
  line-height: 60px;
  text-align: center;
  transition: 0.6s;
}

.option:hover .text{
  left: 60px;
}

</style>